Travailler avec un select en JavaScript
#1
Introduction
Pour faire ce tutoriel des connaissances HTML sur les formulaires et les champs de formulaires sont nécessaires. Si vous avez besoin, vous avez un tutoriel dans la partie HTML-CSS de ce site ici. De plus si vous avez fait les tutoriels JAVASCRIPT sur le DOM cette partie devrait vous paraître assez facile.
#2
Comment se présente le sélecteur en JavaScript ?
- Prenez Sublime Text et créez un fichier
select.htmlsur votre bureau. - Tapez
CTRL+SHIFT+G. - Tapez
!>(form>select>option[value=$]{$}*3)+script+TAB. - Placez le curseur de Sublime devant le
1du contenu du premier élémentoptionpuis faireCTRL+ALT+flèche vers le baspour déplacer le curseur multiple de Sublime puis vous tapezChoixpuisespace.
xxxxxxxxxx1
2
<html lang="fr">3
<head>4
<meta charset="UTF-8">5
</head>6
<body>7
<form action="">8
<select>9
<option value="1">Choix 1</option>10
<option value="2">Choix 2</option>11
<option value="3">Choix 3</option>12
</select>13
</form>14
<script></script>15
</body>16
</html>- Déclarez une variable
eltet affectez la à unquerySelector()sur leselect. - Avec Sublime faites un Open In Browser pour exécuter le fichier dans le navigateur (Prenez plutôt Chrome de manière à ce que l'on voit la même chose).
xxxxxxxxxx1
<body>2
<form action="">3
<select>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="3">Choix 3</option>7
</select>8
</form>9
<script>10
var elt = document.querySelector('select');11
</script>12
</body>- Ouvrez la console et tapez
elt.options. - Développez et constatez que pour chaque option du select en HTML vous avez en JavaScript une entrée dans le tableau
options. Donc ici vous retrouvez vos 3 options du HTML. - Notez que vous avez une propriété
lengthqui correspond évidemment à la taille du tableau. - Vous avez également une propriété
selectedIndexqui vous indique quel est l'option qui est sélectionnée (N'oubliez pas que l'on commence à zéro au niveau des éléments du tableauoptions).
options
- Développez une entrée et vous constatez qu'il y a pas mal de choses et on va s'intéresser à 3 d'entres elles :
- La propriété
labelqui correspond au contenu textuel de l'option. - La propriété
selectedqui est un booléen qui vous indique si l'entrée est sélectionnée ou pas (N'oubliez pas que l'on peut faire de la sélection multiple car c'est dans ce cas là que ça vous servira). - La propriété
valuequi correspond à la valeur duvaluede l'option.
- La propriété
- Développez le prototype
HTMLOptionsCollectionet constatez qu'il y a des méthodes pour ajouter des éléments ou les supprimer. Je vous montrerai plus loin dans ce tuto une autre façon d'ajouter un élément option à un select.
options
#3
La propriété selectedIndex
- Vous pouvez connaître la position du sélecteur au moyen de la propriété
selectedIndex. Vous pouvez y accéder directement au niveau de l'élément (vous n'avez pas besoin de descendre sur le tableau options). - Vous allez mettre en place un gestionnaire d'événement sur le
selectet demander à écouter l'événementchange. - Puis faire un
console.log()duselectedIndex.
xxxxxxxxxx1
<body>2
<form action="">3
<select>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="3">Choix 3</option>7
</select>8
</form>9
<script> 10
var elt = document.querySelector('select');11
elt.addEventListener('change', function () {12
console.log('selectedIndex => '+this.selectedIndex);13
})14
</script>15
</body>- Changez la position du sélecteur et constatez l'affichage dans la console de la valeur de la propriété
selectedIndex. - Constatez entres autres que pour la position
Choix 1leselectedIndexa la valeur0.
- Maintenant vous allez positionner le sélecteur à l'aide du
selectedIndex. Affectez lui la valeur2et constatez qu'il est positionné sur la positionChoix 3.
xxxxxxxxxx1
<body>2
<form action="">3
<select>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="3">Choix 3</option>7
</select>8
</form>9
<script>10
var elt = document.querySelector('select');11
elt.selectedIndex = 2;12
</script>13
</body>
#4
La propriété value
- La valeur de
valuecorrespond à l'option sélectionnée. Remettez en place le gestionnaire d'événement et faites unconsole.log()devalue.
xxxxxxxxxx1
<body>2
<form action="">3
<select>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="3">Choix 3</option>7
</select>8
</form>9
<script>10
var elt = document.querySelector('select');11
elt.addEventListener('change', function () {12
console.log('value => '+this.value);13
})14
</script>15
</body>- Supprimez le gestionnaire d'événement. Vous pouvez aussi positionné le sélecteur en vous servant de
value. Affectez lui la valeur2et constatez que le sélecteur se positionne sur cette valeur devalue. - Ajouter une option avec un
valueque vous affectez à la chaîne de caractères'dix'et affectezvalueà'dix'. - Constatez que le sélecteur se positionne sur cette valeur.
xxxxxxxxxx1
<body>2
<form action="">3
<select>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="dix">Un Dix</option>7
<option value="3">Choix 3</option>8
</select>9
</form>10
<script>11
var elt = document.querySelector('select');12
elt.value = "dix";13
</script>14
</body>
#5
Le tableau options
- Affichez avec des
console.log()les valeurs des propriétéslabel,value,selectedpour les options de rang0et1.
xxxxxxxxxx1
<body>2
<form action="">3
<select>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="3">Choix 3</option>7
</select>8
</form>9
<script>10
var elt = document.querySelector('select');11
/* selected sera true */12
console.log('label => '+elt.options[0].label);13
console.log('value => '+elt.options[0].value);14
console.log('selected => '+elt.options[0].selected);15
/* selected sera false */16
console.log('label => '+elt.options[1].label);17
console.log('value => '+elt.options[1].value);18
console.log('selected => '+elt.options[1].selected);19
</script>20
</body>- On va regarder maintenant comment ajouter une option. Il y a plusieurs façons de le faire et je vous montre la méthode que je préfère. Pour cela, créez une nouvelle instance de l'objet
Optionavec unnew Option. Mettez en premier argument la valeur dulabelet en deuxième argument la valeur devalue. - Ajoutez ensuite ce nouvel élément en fin du tableau
options.
xxxxxxxxxx1
<body>2
<form action="">3
<select>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="3">Choix 3</option>7
</select>8
</form>9
<script>10
var option4 = new Option('Choix 4','4');11
var elt = document.querySelector('select');12
elt.options[elt.options.length] = option4;13
</script>14
</body>
#6
La sélection multiple avec un select
- Au niveau HTML ajoutez
multipledans la balise ouvrante select. - Pour rappel si côté serveur vous voulez recevoir un tableau PHP il faut mettre un attribut
nameégal à une variable avec une paire de crochets comme ceciname=choix[]. - Le problème ici c'est que le
selectedIndexest un entier et pas un tableau. Alors si on veut avoir le tableau des options qui sont sélectionnées et bien il va falloir le fabriquer à partir d'un parcours du tableauoptionsen testant la propriétéselectedpour chaque option. - Avec la propriété
sizefixez la valeur de la fenêtre du select à 3 éléments.
xxxxxxxxxx1
<body>2
<form action="">3
<select name="choix[]" multiple>4
<option value="1">Choix 1</option>5
<option value="2">Choix 2</option>6
<option value="3">Choix 3</option>7
</select>8
</form>9
<script>10
var elt = document.querySelector('select');11
elt.size = 3 ;12
elt.addEventListener('change', function() {13
var tab =[];14
for (var i = 0; i < elt.options.length; i++) {15
if ( elt.options[i].selected === true ) tab[i] = i; 16
}17
console.log(tab);18
})19
</script>20
</body>
